<template>
  <div class="like-book">
    <div class="like-book-content">
      <img class="like-book-image" src="//cs-static-assets.oss-cn-beijing.aliyuncs.com/jiudao_miniapp/like_img.png" alt="喜欢img" />
    </div>
    <div class="like-book-list">
        <div v-for="(item, index) in likeBookList" :key="index" class="like-book-item">
          <div class="per-book">
            <div class="per-book-header">
              <span class="per-book-tag">{{ tagObj[item.type] }}</span>
              <Like :readOnly="true" :likeInfo="item"></Like>
            </div>
            <img class="per-book-img" :src="item.image" alt="喜欢的img" />
            <div class="per-book-desc">{{ item.content }}</div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import request from '../../utils/request'
import Like from '../../components/like/index'
export default {
  data() {
    return {
      likeBookList: [],
      tagObj: {
        100: '电影',
        200: '音乐',
        300: '诗句'
      }
    }
  },
  components: { Like },
  onLoad() {
    this.getLikeBook()
  },
  onShow() {
    // 在组建中，onShow第一次不会执行，在page中onShow会一直执行
    // 在某些需求下，可以使用onshow替换onLoad
    // 使用onShow和onLoad解决tab切换不刷新的问题
    this.getLikeBook()
  },
  methods: {
    getLikeBook() {
      request({
        url: 'classic/favor'
      }).then((result) => {
        this.likeBookList = result
      })
    }
  },
};
</script>

<style scoped>
.like-book-content {
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
.like-book-image {
  margin-top: 20rpx;
  width: 120rpx;
  height: 40rpx;
}
.like-book-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
 .like-book-item {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

}
.per-book {
  box-shadow: 2px 2px 3px #e3e3e3;
  margin-top: 30rpx;
  width: 240rpx;
  height: 390rpx;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.per-book-header {
  display: flex;
  justify-content: space-around;
  padding: 10rpx 0;
}
.per-book-tag {
  font-size: 24rpx;
  color: #bbb;
  background-color: #eee;
  padding: 0 10rpx;
  border-radius: 4rpx;
}
.per-book-img {
  width: 100%;
  height: 230rpx;
}
.per-book-desc {
  font-size: 24rpx;
  padding: 10rpx;
  line-height: 26rpx;
  text-align: left;
  color: #bbb;
  /* 超过2行显示... */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; 
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}
</style>